
<template>
  <div class="news-list">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in list" :key='item.id'>
                <router-link :to="'/newsInfo?id='+item.id">
                    <img class="mui-media-object mui-pull-left" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564061068756&di=ca52338d403f06047a4d7be1ecbd9b7e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F12%2F20170812100523_FHdsJ.jpeg">
                    <div class="mui-media-body">
                        <span class="art-title">{{item.title}}</span>
                        <p class='mui-ellipsis'>
                            <span class="time">发布时间:{{item.time}}</span>
                            <span>点击次数:{{item.hits}}次</span>
                            </p>
                    </div>
                </router-link>
            </li>
        </ul>
  </div>
</template>

<script>
export default {
  name: 'news-list',
  data() { 
    return {
        list:[{
            id:0,title:"你好世界",time:'1997-07-12 08:11',hits:22
        },
        {
            id:1,title:"你好世界",time:'1997-07-12 08:11',hits:22
        },
        {
            id:2,title:"你好世界",time:'1997-07-12 08:11',hits:22
        },
        
        ]
    }
  }
 }
</script>

<style lang="" scoped>

.art-title{
    font-size: 15px;
}
.mui-ellipsis{
    font-size: 12px;
    color:#87CEFb;
    display: flex;
    justify-content: space-between;
}
</style>